<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>EasyUI的使用 | Kylin</title><meta name="keywords" content="基础,EasyUI"><meta name="author" content="Kylin"><meta name="copyright" content="Kylin"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta name="description" content="jQuery EasyUI是一组基于jQuery的UI插件集合体，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。简而言之，EasyUI的使用通过查看api文档，想要的样式只需id名和class名一样就可以使用，通过 data-o">
<meta property="og:type" content="article">
<meta property="og:title" content="EasyUI的使用">
<meta property="og:url" content="https://www.codekylin.cn/47587.html">
<meta property="og:site_name" content="Kylin">
<meta property="og:description" content="jQuery EasyUI是一组基于jQuery的UI插件集合体，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。简而言之，EasyUI的使用通过查看api文档，想要的样式只需id名和class名一样就可以使用，通过 data-o">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://qiniu.codekylin.cn/github/img/img/博客封面19.png">
<meta property="article:published_time" content="2019-10-22T08:02:43.000Z">
<meta property="article:modified_time" content="2022-07-12T11:45:22.358Z">
<meta property="article:author" content="Kylin">
<meta property="article:tag" content="基础">
<meta property="article:tag" content="EasyUI">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://qiniu.codekylin.cn/github/img/img/博客封面19.png"><link rel="shortcut icon" href="https://qiniu.codekylin.cn/img/20200807181548.png"><link rel="canonical" href="https://www.codekylin.cn/47587"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//www.google-analytics.com" crossorigin=""/><link rel="preconnect" href="//hm.baidu.com"/><link rel="preconnect" href="//fonts.googleapis.com" crossorigin=""/><meta name="google-site-verification" content="gzeyWstt6NoTZKh7YFYNLNziL8HIZ8YH2Ug7xTDX5-Y"/><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/node-snackbar/dist/snackbar.min.css" media="print" onload="this.media='all'"><script>var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?f76c34daefe747deee7c7be3ead2ba80";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script><script async="async" src="https://www.googletagmanager.com/gtag/js?id=UA-159334016-1"></script><script>window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-159334016-1');
</script><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium+Web" media="print" onload="this.media='all'"><script>const GLOBAL_CONFIG = { 
  root: '/',
  algolia: undefined,
  localSearch: {"path":"search.xml","languages":{"hits_empty":"找不到您查询的内容：${query}"}},
  translate: {"defaultEncoding":2,"translateDelay":0,"msgToTraditionalChinese":"繁","msgToSimplifiedChinese":"简"},
  noticeOutdate: {"limitDay":90,"position":"top","messagePrev":"自上次更新以来已经","messageNext":"天，文章的内容可能已过时或存在差异。"},
  highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":false},
  copy: {
    success: '复制成功',
    error: '复制错误',
    noSupport: '浏览器不支持'
  },
  relativeDate: {
    homepage: false,
    post: false
  },
  runtime: '天',
  date_suffix: {
    just: '刚刚',
    min: '分钟前',
    hour: '小时前',
    day: '天前',
    month: '个月前'
  },
  copyright: {"limitCount":50000,"languages":{"author":"作者: Kylin","link":"链接: ","source":"来源: Kylin","info":"著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。"}},
  lightbox: 'fancybox',
  Snackbar: {"chs_to_cht":"你已切换为繁体","cht_to_chs":"你已切换为简体","day_to_night":"你已切换为深色模式","night_to_day":"你已切换为浅色模式","bgLight":"#FF0000","bgDark":"#2d3035","position":"bottom-left"},
  source: {
    jQuery: 'https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js',
    justifiedGallery: {
      js: 'https://cdn.jsdelivr.net/npm/justifiedGallery/dist/js/jquery.justifiedGallery.min.js',
      css: 'https://cdn.jsdelivr.net/npm/justifiedGallery/dist/css/justifiedGallery.min.css'
    },
    fancybox: {
      js: 'https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.js',
      css: 'https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.css'
    }
  },
  isPhotoFigcaption: false,
  islazyload: true,
  isanchor: false
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = { 
  isPost: true,
  isHome: false,
  isHighlightShrink: false,
  isToc: true,
  postUpdate: '2022-07-12 19:45:22'
}</script><noscript><style type="text/css">
  #nav {
    opacity: 1
  }
  .justified-gallery img {
    opacity: 1
  }

  #recent-posts time,
  #post-meta time {
    display: inline !important
  }
</style></noscript><script>(win=>{
    win.saveToLocal = {
      set: function setWithExpiry(key, value, ttl) {
        if (ttl === 0) return
        const now = new Date()
        const expiryDay = ttl * 86400000
        const item = {
          value: value,
          expiry: now.getTime() + expiryDay,
        }
        localStorage.setItem(key, JSON.stringify(item))
      },

      get: function getWithExpiry(key) {
        const itemStr = localStorage.getItem(key)

        if (!itemStr) {
          return undefined
        }
        const item = JSON.parse(itemStr)
        const now = new Date()

        if (now.getTime() > item.expiry) {
          localStorage.removeItem(key)
          return undefined
        }
        return item.value
      }
    }
  
    win.getScript = url => new Promise((resolve, reject) => {
      const script = document.createElement('script')
      script.src = url
      script.async = true
      script.onerror = reject
      script.onload = script.onreadystatechange = function() {
        const loadState = this.readyState
        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
        script.onload = script.onreadystatechange = null
        resolve()
      }
      document.head.appendChild(script)
    })
  
      win.activateDarkMode = function () {
        document.documentElement.setAttribute('data-theme', 'dark')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
        }
      }
      win.activateLightMode = function () {
        document.documentElement.setAttribute('data-theme', 'light')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
        }
      }
      const t = saveToLocal.get('theme')
    
          const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches
          const isLightMode = window.matchMedia('(prefers-color-scheme: light)').matches
          const isNotSpecified = window.matchMedia('(prefers-color-scheme: no-preference)').matches
          const hasNoSupport = !isDarkMode && !isLightMode && !isNotSpecified

          if (t === undefined) {
            if (isLightMode) activateLightMode()
            else if (isDarkMode) activateDarkMode()
            else if (isNotSpecified || hasNoSupport) {
              const now = new Date()
              const hour = now.getHours()
              const isNight = hour <= 6 || hour >= 18
              isNight ? activateDarkMode() : activateLightMode()
            }
            window.matchMedia('(prefers-color-scheme: dark)').addListener(function (e) {
              if (saveToLocal.get('theme') === undefined) {
                e.matches ? activateDarkMode() : activateLightMode()
              }
            })
          } else if (t === 'light') activateLightMode()
          else activateDarkMode()
        
      const asideStatus = saveToLocal.get('aside-status')
      if (asideStatus !== undefined) {
        if (asideStatus === 'hide') {
          document.documentElement.classList.add('hide-aside')
        } else {
          document.documentElement.classList.remove('hide-aside')
        }
      }
    
    const fontSizeVal = saveToLocal.get('global-font-size')
    if (fontSizeVal !== undefined) {
      document.documentElement.style.setProperty('--global-font-size', fontSizeVal + 'px')
    }
    })(window)</script><link rel="stylesheet" href="https://qiniu.codekylin.cn/github/img/img/custom.css"><link rel="stylesheet" href="//at.alicdn.com/t/font_1993646_z05rabxf05h.css"><link rel="stylesheet" href="https://qiniu.codekylin.cn/github/img/img/icon.css"><meta name="generator" content="Hexo 5.4.0"><link rel="alternate" href="/atom.xml" title="Kylin" type="application/atom+xml">
</head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="author-avatar"><img class="avatar-img" data-lazy-src="https://qiniu.codekylin.cn/img/20200807181526.jpg" onerror="onerror=null;src='https://qiniu.codekylin.cn/github/img/friend_404.gif'" alt="avatar"/></div><div class="site-data"><div class="data-item is-center"><div class="data-item-link"><a href="/archives/"><div class="headline">文章</div><div class="length-num">362</div></a></div></div><div class="data-item is-center"><div class="data-item-link"><a href="/tags/"><div class="headline">标签</div><div class="length-num">427</div></a></div></div><div class="data-item is-center"><div class="data-item-link"><a href="/categories/"><div class="headline">分类</div><div class="length-num">101</div></a></div></div></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fa fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fa fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fa fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fa fa-folder-open"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw fa fa-link"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fa fa-heart"></i><span> 关于</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://qiniu.codekylin.cn/github/img/img/博客封面19.png')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Kylin</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fa fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fa fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fa fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fa fa-folder-open"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw fa fa-link"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fa fa-heart"></i><span> 关于</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">EasyUI的使用</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2019-10-22T08:02:43.000Z" title="发表于 2019-10-22 16:02:43">2019-10-22</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2022-07-12T11:45:22.358Z" title="更新于 2022-07-12 19:45:22">2022-07-12</time></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">2.6k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>13分钟</span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><p><img src= "https://gitee.com/kylincw/images/raw/master/loading.gif" data-lazy-src="https://qiniu.codekylin.cn/img/20200405122132.png" alt=""><br>jQuery EasyUI是一组基于jQuery的UI插件集合体，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。简而言之，EasyUI的使用通过查看api文档，想要的样式只需id名和class名一样就可以使用，通过 data-options选择你需要的属性即可。</p>
<h2 id="EasyUI使用"><a href="#EasyUI使用" class="headerlink" title="EasyUI使用"></a>EasyUI使用</h2><ul>
<li><strong>1 将EasyUI提供的js文件和主题（themes）样式存放到项目的指定位置</strong></li>
<li><strong>2 在Html文档中引入EasyUI的插件,引用路径为相对路径</strong></li>
<li><strong>3在HTML文档标签上遵循EasyUI的文档规则使用EasyUI完成页面的开发</strong>    <span id="more"></span></li>
<li>面板使用(panel)：<ul>
<li>创建面板：<ul>
<li>在创建一个div标签，并class属性值为：”easyui-panel”</li>
</ul>
</li>
<li>面板属性:</li>
<li>data-options：给面板添加常用的操作。具体参照API    </li>
<li>添加按钮</li>
<li>信息提示</li>
</ul>
</li>
<li>注意：<ul>
<li>EasyUI的使用<ul>
<li><strong>通过标签的class属性添加基本EasyUI功能，包括样式和jQuery操作</strong></li>
<li><strong>data-options属性对标签的基本功能进行修改操作</strong><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">title</span>&gt;</span>登录<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span> /&gt;</span></span><br><span class="line">		<span class="comment">&lt;!--引入主题样式--&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">link</span> <span class="attr">rel</span>=<span class="string">&quot;stylesheet&quot;</span> <span class="attr">type</span>=<span class="string">&quot;text/css&quot;</span> <span class="attr">href</span>=<span class="string">&quot;themes/default/easyui.css&quot;</span> /&gt;</span></span><br><span class="line">		<span class="comment">&lt;!--引入图标样式--&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">link</span> <span class="attr">rel</span>=<span class="string">&quot;stylesheet&quot;</span> <span class="attr">type</span>=<span class="string">&quot;text/css&quot;</span> <span class="attr">href</span>=<span class="string">&quot;themes/icon.css&quot;</span> /&gt;</span></span><br><span class="line">		<span class="comment">&lt;!--引入jQuery文件--&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;js/jquery.min.js&quot;</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span> <span class="attr">charset</span>=<span class="string">&quot;utf-8&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">		<span class="comment">&lt;!--引入EasyUi的js文件--&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;js/jquery.easyui.min.js&quot;</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span> <span class="attr">charset</span>=<span class="string">&quot;utf-8&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">		<span class="comment">&lt;!--声明css代码域--&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">style</span> <span class="attr">type</span>=<span class="string">&quot;text/css&quot;</span>&gt;</span><span class="css"></span></span><br><span class="line"><span class="css">			<span class="selector-tag">table</span>&#123;</span></span><br><span class="line"><span class="css">				<span class="attribute">margin</span>: auto;</span></span><br><span class="line"><span class="css">				<span class="attribute">margin-top</span>: <span class="number">20px</span>;</span></span><br><span class="line"><span class="css">			&#125;</span></span><br><span class="line"><span class="css">			<span class="selector-tag">tr</span>&#123;</span></span><br><span class="line"><span class="css">				<span class="attribute">height</span>: <span class="number">40px</span>;</span></span><br><span class="line"><span class="css">				<span class="attribute">text-align</span>: center;</span></span><br><span class="line"><span class="css">			&#125;</span></span><br><span class="line"><span class="css">		</span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line">		<span class="comment">&lt;!--声明js代码域--&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">			<span class="comment">/*校验登录信息*/</span></span></span><br><span class="line"><span class="javascript">				$(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">					</span></span><br><span class="line"><span class="javascript">					<span class="comment">//登录校验</span></span></span><br><span class="line"><span class="javascript">					$(<span class="string">&quot;#btnCon&quot;</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">						<span class="comment">//校验用户信息</span></span></span><br><span class="line"><span class="javascript">						<span class="keyword">if</span>($(<span class="string">&quot;:text&quot;</span>).val()==<span class="string">&quot;&quot;</span>)&#123;</span></span><br><span class="line"><span class="javascript">							<span class="comment">//使用EasyUI的信息框进行提示</span></span></span><br><span class="line"><span class="javascript">							$.messager.alert(<span class="string">&#x27;登录提示&#x27;</span>,<span class="string">&quot;用户名不能为空！&quot;</span>,<span class="string">&quot;warning&quot;</span>);</span></span><br><span class="line"><span class="javascript">						&#125;<span class="keyword">else</span> <span class="keyword">if</span>($(<span class="string">&quot;:password&quot;</span>).val()==<span class="string">&quot;&quot;</span>)&#123;</span></span><br><span class="line"><span class="javascript">							<span class="comment">//使用EasyUI的信息框进行提示</span></span></span><br><span class="line"><span class="javascript">							$.messager.alert(<span class="string">&#x27;登录提示&#x27;</span>,<span class="string">&quot;密码不能为空！&quot;</span>,<span class="string">&quot;warning&quot;</span>);</span></span><br><span class="line"><span class="javascript">						&#125;<span class="keyword">else</span>&#123;</span></span><br><span class="line"><span class="javascript">							$(<span class="string">&quot;form&quot;</span>).submit();</span></span><br><span class="line"><span class="javascript">						&#125;</span></span><br><span class="line"><span class="javascript">					&#125;)</span></span><br><span class="line"><span class="javascript">					<span class="comment">//重置</span></span></span><br><span class="line"><span class="javascript">					$(<span class="string">&quot;#btnCan&quot;</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">						$(<span class="string">&quot;form&quot;</span>).get(<span class="number">0</span>).reset();</span></span><br><span class="line"><span class="javascript">					&#125;)</span></span><br><span class="line"><span class="javascript">				&#125;)</span></span><br><span class="line"><span class="javascript">		</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line">	<span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;panel_login&quot;</span> <span class="attr">style</span>=<span class="string">&quot;margin: auto;width: 500px;margin-top: 100px;&quot;</span>&gt;</span></span><br><span class="line">			<span class="comment">&lt;!--创建登录面板--&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;login&quot;</span> <span class="attr">class</span>=<span class="string">&quot;easyui-panel&quot;</span> <span class="attr">title</span>=<span class="string">&quot;登录&quot;</span> <span class="attr">data-options</span>=<span class="string">&quot;iconCls:&#x27;icon-mlogin&#x27;,minimizable:true,maximizable:true</span></span></span><br><span class="line"><span class="string"><span class="tag">				,collapsible:true,closable:true&quot;</span> <span class="attr">style</span>=<span class="string">&quot;width: 500px;height: 200px;&quot;</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;<span class="name">form</span> <span class="attr">action</span>=<span class="string">&quot;02_main.html&quot;</span> <span class="attr">method</span>=<span class="string">&quot;get&quot;</span>&gt;</span></span><br><span class="line">					<span class="tag">&lt;<span class="name">table</span>&gt;</span></span><br><span class="line">						<span class="tag">&lt;<span class="name">tr</span>&gt;</span></span><br><span class="line">							<span class="tag">&lt;<span class="name">td</span>&gt;</span>用户名:<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">							<span class="tag">&lt;<span class="name">td</span>&gt;</span></span><br><span class="line">								<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">name</span>=<span class="string">&quot;uname&quot;</span>/&gt;</span></span><br><span class="line">							<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">						<span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">						<span class="tag">&lt;<span class="name">tr</span>&gt;</span></span><br><span class="line">							<span class="tag">&lt;<span class="name">td</span>&gt;</span>密<span class="symbol">&amp;nbsp;</span><span class="symbol">&amp;nbsp;</span><span class="symbol">&amp;nbsp;</span>码:<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">							<span class="tag">&lt;<span class="name">td</span>&gt;</span></span><br><span class="line">								<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;password&quot;</span> <span class="attr">name</span>=<span class="string">&quot;pwd&quot;</span> /&gt;</span></span><br><span class="line">							<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">						<span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">						<span class="tag">&lt;<span class="name">tr</span>&gt;</span></span><br><span class="line">							<span class="tag">&lt;<span class="name">td</span> <span class="attr">colspan</span>=<span class="string">&quot;2&quot;</span>&gt;</span></span><br><span class="line">								<span class="tag">&lt;<span class="name">a</span> <span class="attr">id</span>=<span class="string">&quot;btnCon&quot;</span> <span class="attr">href</span>=<span class="string">&quot;javascript:void(0)&quot;</span> <span class="attr">class</span>=<span class="string">&quot;easyui-linkbutton&quot;</span> <span class="attr">data-options</span>=<span class="string">&quot;iconCls:&#x27;icon-save&#x27;&quot;</span>&gt;</span>登录<span class="tag">&lt;/<span class="name">a</span>&gt;</span><span class="symbol">&amp;nbsp;</span> <span class="symbol">&amp;nbsp;</span><span class="symbol">&amp;nbsp;</span></span><br><span class="line">								<span class="tag">&lt;<span class="name">a</span> <span class="attr">id</span>=<span class="string">&quot;btnCan&quot;</span> <span class="attr">href</span>=<span class="string">&quot;javascript:void(0)&quot;</span> <span class="attr">class</span>=<span class="string">&quot;easyui-linkbutton&quot;</span> <span class="attr">data-options</span>=<span class="string">&quot;iconCls:&#x27;icon-cancel&#x27;&quot;</span>&gt;</span>重置<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">							<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">						<span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">					<span class="tag">&lt;/<span class="name">table</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;/<span class="name">form</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<img src= "https://gitee.com/kylincw/images/raw/master/loading.gif" data-lazy-src="https://qiniu.codekylin.cn/img/20200405122147.png" alt=""><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br><span class="line">185</span><br><span class="line">186</span><br><span class="line">187</span><br><span class="line">188</span><br><span class="line">189</span><br><span class="line">190</span><br><span class="line">191</span><br><span class="line">192</span><br><span class="line">193</span><br><span class="line">194</span><br><span class="line">195</span><br><span class="line">196</span><br><span class="line">197</span><br><span class="line">198</span><br><span class="line">199</span><br><span class="line">200</span><br><span class="line">201</span><br><span class="line">202</span><br><span class="line">203</span><br><span class="line">204</span><br><span class="line">205</span><br><span class="line">206</span><br><span class="line">207</span><br><span class="line">208</span><br><span class="line">209</span><br><span class="line">210</span><br><span class="line">211</span><br><span class="line">212</span><br><span class="line">213</span><br><span class="line">214</span><br><span class="line">215</span><br><span class="line">216</span><br><span class="line">217</span><br><span class="line">218</span><br><span class="line">219</span><br><span class="line">220</span><br><span class="line">221</span><br><span class="line">222</span><br><span class="line">223</span><br><span class="line">224</span><br><span class="line">225</span><br><span class="line">226</span><br><span class="line">227</span><br><span class="line">228</span><br><span class="line">229</span><br><span class="line">230</span><br><span class="line">231</span><br><span class="line">232</span><br><span class="line">233</span><br><span class="line">234</span><br><span class="line">235</span><br><span class="line">236</span><br><span class="line">237</span><br><span class="line">238</span><br><span class="line">239</span><br><span class="line">240</span><br><span class="line">241</span><br><span class="line">242</span><br><span class="line">243</span><br><span class="line">244</span><br><span class="line">245</span><br><span class="line">246</span><br><span class="line">247</span><br><span class="line">248</span><br><span class="line">249</span><br><span class="line">250</span><br><span class="line">251</span><br><span class="line">252</span><br><span class="line">253</span><br><span class="line">254</span><br><span class="line">255</span><br><span class="line">256</span><br><span class="line">257</span><br><span class="line">258</span><br><span class="line">259</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line"></span><br><span class="line">	<span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">title</span>&gt;</span>主页面<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span> /&gt;</span></span><br><span class="line">		<span class="comment">&lt;!--引入主题样式--&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">link</span> <span class="attr">rel</span>=<span class="string">&quot;stylesheet&quot;</span> <span class="attr">type</span>=<span class="string">&quot;text/css&quot;</span> <span class="attr">href</span>=<span class="string">&quot;themes/default/easyui.css&quot;</span> /&gt;</span></span><br><span class="line">		<span class="comment">&lt;!--引入图标样式--&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">link</span> <span class="attr">rel</span>=<span class="string">&quot;stylesheet&quot;</span> <span class="attr">type</span>=<span class="string">&quot;text/css&quot;</span> <span class="attr">href</span>=<span class="string">&quot;themes/icon.css&quot;</span> /&gt;</span></span><br><span class="line">		<span class="comment">&lt;!--引入jQuery文件--&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;js/jquery.min.js&quot;</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span> <span class="attr">charset</span>=<span class="string">&quot;utf-8&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">		<span class="comment">&lt;!--引入EasyUi的js文件--&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;js/jquery.easyui.min.js&quot;</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span> <span class="attr">charset</span>=<span class="string">&quot;utf-8&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">		<span class="comment">&lt;!--</span></span><br><span class="line"><span class="comment">			主页面:</span></span><br><span class="line"><span class="comment">				1 引入EasyUI插件</span></span><br><span class="line"><span class="comment">				2 使用body布局方式</span></span><br><span class="line"><span class="comment">				3 将布局后的每块区域完成内容填充</span></span><br><span class="line"><span class="comment">			</span></span><br><span class="line"><span class="comment">			</span></span><br><span class="line"><span class="comment">		--&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">style</span> <span class="attr">type</span>=<span class="string">&quot;text/css&quot;</span>&gt;</span><span class="css"></span></span><br><span class="line"><span class="css">			<span class="selector-id">#sdiv</span> &#123;</span></span><br><span class="line"><span class="css">				<span class="attribute">text-align</span>: center;</span></span><br><span class="line"><span class="css">				<span class="attribute">font-size</span>: <span class="number">14px</span>;</span></span><br><span class="line"><span class="css">				<span class="attribute">font-weight</span>: bold;</span></span><br><span class="line"><span class="css">				<span class="attribute">line-height</span>: <span class="number">30px</span>;</span></span><br><span class="line"><span class="css">				<span class="attribute">background-color</span>: gray;</span></span><br><span class="line"><span class="css">			&#125;</span></span><br><span class="line"><span class="css">			<span class="comment">/*修改头部标题样式*/</span></span></span><br><span class="line"><span class="css">			</span></span><br><span class="line"><span class="css">			<span class="selector-id">#n_title</span> &#123;</span></span><br><span class="line"><span class="css">				<span class="attribute">color</span>: white;</span></span><br><span class="line"><span class="css">				<span class="attribute">font-size</span>: <span class="number">14px</span>;</span></span><br><span class="line"><span class="css">				<span class="attribute">line-height</span>: <span class="number">40px</span>;</span></span><br><span class="line"><span class="css">			&#125;</span></span><br><span class="line"><span class="css">			<span class="comment">/*修改标题超链接样式*/</span></span></span><br><span class="line"><span class="css">			</span></span><br><span class="line"><span class="css">			<span class="selector-id">#n_title</span> <span class="selector-tag">a</span> &#123;</span></span><br><span class="line"><span class="css">				<span class="attribute">text-decoration</span>: none;</span></span><br><span class="line"><span class="css">				<span class="attribute">color</span>: white;</span></span><br><span class="line"><span class="css">			&#125;</span></span><br><span class="line"><span class="css">			</span></span><br><span class="line"><span class="css">			<span class="selector-id">#n_title</span> <span class="selector-tag">a</span><span class="selector-pseudo">:hover</span> &#123;</span></span><br><span class="line"><span class="css">				<span class="attribute">color</span>: orange;</span></span><br><span class="line"><span class="css">			&#125;</span></span><br><span class="line"><span class="css">			<span class="comment">/*修改密码样式*/</span></span></span><br><span class="line"><span class="css">			</span></span><br><span class="line"><span class="css">			<span class="selector-id">#div_pwd</span> <span class="selector-tag">table</span> &#123;</span></span><br><span class="line"><span class="css">				<span class="attribute">margin</span>: auto;</span></span><br><span class="line"><span class="css">				<span class="attribute">margin-top</span>: <span class="number">10px</span>;</span></span><br><span class="line"><span class="css">			&#125;</span></span><br><span class="line"><span class="css">			</span></span><br><span class="line"><span class="css">			<span class="selector-id">#div_pwd</span> <span class="selector-tag">table</span> <span class="selector-tag">tr</span> &#123;</span></span><br><span class="line"><span class="css">				<span class="attribute">height</span>: <span class="number">40px</span>;</span></span><br><span class="line"><span class="css">				<span class="attribute">text-align</span>: center;</span></span><br><span class="line"><span class="css">			&#125;</span></span><br><span class="line"><span class="css">		</span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line">		<span class="comment">&lt;!--声明js代码域--&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">			<span class="comment">/*网页js功能*/</span></span></span><br><span class="line"><span class="javascript">			$(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">				<span class="comment">//退出功能</span></span></span><br><span class="line"><span class="javascript">				$(<span class="string">&quot;#n_title_out&quot;</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">						<span class="comment">//提示用户是否确定退出</span></span></span><br><span class="line"><span class="javascript">						$.messager.confirm(<span class="string">&quot;确认对话框&quot;</span>, <span class="string">&quot;你真的要退出吗？&quot;</span>, <span class="function"><span class="keyword">function</span>(<span class="params">r</span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">							<span class="comment">//退出</span></span></span><br><span class="line"><span class="javascript">							<span class="keyword">if</span> (r) &#123;</span></span><br><span class="line"><span class="javascript">								<span class="built_in">window</span>.location.href = <span class="string">&quot;01_login.html&quot;</span>;</span></span><br><span class="line"><span class="javascript">							&#125;</span></span><br><span class="line"><span class="javascript">						&#125;)</span></span><br><span class="line"><span class="javascript">					&#125;)</span></span><br><span class="line"><span class="javascript">					<span class="comment">//修改密码</span></span></span><br><span class="line"><span class="javascript">				$(<span class="string">&quot;#n_title_pwd&quot;</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">						<span class="comment">//打开修改密码窗口</span></span></span><br><span class="line"><span class="javascript">						$(<span class="string">&quot;#div_pwd&quot;</span>).window(<span class="string">&quot;open&quot;</span>);</span></span><br><span class="line"><span class="javascript">				&#125;)</span></span><br><span class="line"><span class="javascript">			<span class="comment">//确认修改密码</span></span></span><br><span class="line"><span class="javascript">				$(<span class="string">&quot;#btnCon&quot;</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">					<span class="comment">//校验原有密码</span></span></span><br><span class="line"><span class="javascript">					<span class="keyword">if</span> ($(<span class="string">&quot;:password:eq(0)&quot;</span>).val() == <span class="string">&quot;&quot;</span>) &#123;</span></span><br><span class="line"><span class="javascript">						$.messager.alert(<span class="string">&quot;原有密码&quot;</span>, <span class="string">&quot;原有密码不能为空！&quot;</span>, <span class="string">&quot;warning&quot;</span>);</span></span><br><span class="line"><span class="javascript">					&#125; <span class="keyword">else</span> <span class="keyword">if</span> ($(<span class="string">&quot;:password:eq(1)&quot;</span>).val() == <span class="string">&quot;&quot;</span>) &#123;</span></span><br><span class="line"><span class="javascript">						<span class="comment">//校验新密码</span></span></span><br><span class="line"><span class="javascript">						$.messager.alert(<span class="string">&quot;新密码&quot;</span>, <span class="string">&quot;新密码不能为空！&quot;</span>, <span class="string">&quot;warning&quot;</span>);</span></span><br><span class="line"><span class="javascript">					&#125; <span class="keyword">else</span> <span class="keyword">if</span> ($(<span class="string">&quot;:password:eq(2)&quot;</span>).val() == <span class="string">&quot;&quot;</span>) &#123;</span></span><br><span class="line"><span class="javascript">						<span class="comment">//校验确认密码</span></span></span><br><span class="line"><span class="javascript">						$.messager.alert(<span class="string">&quot;确认密码&quot;</span>, <span class="string">&quot;确认密码不能为空！&quot;</span>, <span class="string">&quot;warning&quot;</span>);</span></span><br><span class="line"><span class="javascript">					&#125; <span class="keyword">else</span> <span class="keyword">if</span> ($(<span class="string">&quot;:password:eq(1)&quot;</span>).val() != $(<span class="string">&quot;:password:eq(2)&quot;</span>).val()) &#123;</span></span><br><span class="line"><span class="javascript">						<span class="comment">//校验两次密码</span></span></span><br><span class="line"><span class="javascript">						$.messager.alert(<span class="string">&quot;密码校验&quot;</span>, <span class="string">&quot;两次密码不一致！&quot;</span>, <span class="string">&quot;error&quot;</span>);</span></span><br><span class="line"><span class="javascript">					&#125; <span class="keyword">else</span> &#123;</span></span><br><span class="line"><span class="javascript">						<span class="comment">//关闭密码窗口</span></span></span><br><span class="line"><span class="javascript">						$(<span class="string">&quot;#div_pwd&quot;</span>).window(<span class="string">&quot;close&quot;</span>);</span></span><br><span class="line"><span class="javascript">						<span class="comment">//$.messager.alert(&quot;密码修改&quot;,&quot;密码修改成功！&quot;,&quot;info&quot;);</span></span></span><br><span class="line"><span class="javascript">						$.messager.show(&#123;</span></span><br><span class="line"><span class="javascript">							<span class="attr">title</span>: <span class="string">&#x27;密码修改&#x27;</span>,</span></span><br><span class="line"><span class="javascript">							<span class="attr">msg</span>: <span class="string">&#x27;密码修改成功，新密码为:&#x27;</span>+$(<span class="string">&quot;:password:eq(2)&quot;</span>).val(),</span></span><br><span class="line"><span class="javascript">							<span class="attr">timeout</span>: <span class="number">3000</span>,</span></span><br><span class="line"><span class="javascript">							<span class="attr">showType</span>: <span class="string">&#x27;slide&#x27;</span></span></span><br><span class="line"><span class="javascript">						&#125;);</span></span><br><span class="line"><span class="javascript">					&#125;</span></span><br><span class="line"><span class="javascript">				&#125;)</span></span><br><span class="line"><span class="javascript">			<span class="comment">//取消密码修改</span></span></span><br><span class="line"><span class="javascript">				$(<span class="string">&quot;#btnCan&quot;</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">					$(<span class="string">&quot;#div_pwd&quot;</span>).window(<span class="string">&quot;close&quot;</span>);</span></span><br><span class="line"><span class="javascript">				&#125;)</span></span><br><span class="line"><span class="javascript">			<span class="comment">//树状菜单和选项卡的联动</span></span></span><br><span class="line"><span class="javascript">				<span class="comment">//给菜单添加单击事件</span></span></span><br><span class="line"><span class="javascript">				$(<span class="string">&quot;#treeMenu&quot;</span>).tree(&#123;</span></span><br><span class="line"><span class="javascript">					<span class="attr">onClick</span>:<span class="function"><span class="keyword">function</span>(<span class="params">node</span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">						<span class="comment">//控制台打印node内容</span></span></span><br><span class="line"><span class="javascript">							<span class="comment">//console.log(node);</span></span></span><br><span class="line"><span class="javascript">						<span class="comment">//获取attributes属性,判断是菜单还是菜单描述</span></span></span><br><span class="line"><span class="javascript">						<span class="keyword">var</span> attrs=node.attributes;</span></span><br><span class="line"><span class="javascript">						<span class="keyword">if</span>(attrs==<span class="literal">null</span> || attrs.url==<span class="string">&#x27;&#x27;</span>)&#123;</span></span><br><span class="line"><span class="javascript">							<span class="keyword">return</span>;</span></span><br><span class="line"><span class="javascript">						&#125;</span></span><br><span class="line"><span class="javascript">						<span class="comment">//判断选项卡是否存在</span></span></span><br><span class="line"><span class="javascript">						<span class="keyword">var</span> has=$(<span class="string">&quot;#div_tabs&quot;</span>).tabs(<span class="string">&quot;exists&quot;</span>,node.text);</span></span><br><span class="line"><span class="javascript">						<span class="keyword">if</span>(has)&#123;</span></span><br><span class="line"><span class="javascript">							<span class="comment">//选中存在的选项卡</span></span></span><br><span class="line"><span class="javascript">							$(<span class="string">&quot;#div_tabs&quot;</span>).tabs(<span class="string">&quot;select&quot;</span>,node.text);</span></span><br><span class="line"><span class="javascript">						&#125;<span class="keyword">else</span>&#123;</span></span><br><span class="line"><span class="javascript">							<span class="comment">//创建新的选项卡面板</span></span></span><br><span class="line"><span class="javascript">							$(<span class="string">&quot;#div_tabs&quot;</span>).tabs(<span class="string">&quot;add&quot;</span>,&#123;</span></span><br><span class="line"><span class="javascript">								<span class="attr">title</span>:node.text,</span></span><br><span class="line"><span class="javascript">								<span class="attr">closable</span>:<span class="literal">true</span>,</span></span><br><span class="line"><span class="javascript">								<span class="attr">content</span>:<span class="string">&quot;&lt;iframe src=&quot;</span>+attrs.url+<span class="string">&quot; style=&#x27;width:100%;height:98%&#x27; frameborder=&#x27;0&#x27;/&gt;&quot;</span></span></span><br><span class="line"><span class="javascript">							&#125;)</span></span><br><span class="line"><span class="javascript">						&#125;</span></span><br><span class="line"><span class="javascript">						</span></span><br><span class="line"><span class="javascript">						</span></span><br><span class="line"><span class="javascript">					&#125;</span></span><br><span class="line"><span class="javascript">				&#125;)</span></span><br><span class="line"><span class="javascript">				</span></span><br><span class="line"><span class="javascript">				</span></span><br><span class="line"><span class="javascript">				</span></span><br><span class="line"><span class="javascript">			&#125;)</span></span><br><span class="line"><span class="javascript">			<span class="comment">/*</span></span></span><br><span class="line"><span class="comment"><span class="javascript">			 	Json数据格式</span></span></span><br><span class="line"><span class="comment"><span class="javascript">			 		&#123;&quot;键名&quot;:&quot;值&quot;,&quot;键名&quot;:&quot;值&quot;,...........&#125;</span></span></span><br><span class="line"><span class="comment"><span class="javascript">			 		</span></span></span><br><span class="line"><span class="comment"><span class="javascript">			 		&#123;</span></span></span><br><span class="line"><span class="comment"><span class="javascript">			 			&quot;键名&quot;:&quot;值&quot;,</span></span></span><br><span class="line"><span class="comment"><span class="javascript">			 			&quot;键名&quot;:&quot;值&quot;,</span></span></span><br><span class="line"><span class="comment"><span class="javascript">			 			...........</span></span></span><br><span class="line"><span class="comment"><span class="javascript">			 		&#125;</span></span></span><br><span class="line"><span class="comment"><span class="javascript">			 * </span></span></span><br><span class="line"><span class="comment"><span class="javascript">			 * </span></span></span><br><span class="line"><span class="comment"><span class="javascript">			 * */</span></span></span><br><span class="line"><span class="javascript">		</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line">	<span class="tag">&lt;<span class="name">body</span> <span class="attr">class</span>=<span class="string">&quot;easyui-layout&quot;</span>&gt;</span></span><br><span class="line">		<span class="comment">&lt;!--布局：北--&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">div</span> <span class="attr">data-options</span>=<span class="string">&quot;region:&#x27;north&#x27;&quot;</span> <span class="attr">style</span>=<span class="string">&quot;height: 50%;background-image: url(img/layout-browser-hd-bg.gif);&quot;</span>&gt;</span></span><br><span class="line">			<span class="comment">&lt;!--添加网站Logo--&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">span</span> <span class="attr">id</span>=<span class="string">&quot;n_logo&quot;</span> <span class="attr">style</span>=<span class="string">&quot;margin-left: 20px;&quot;</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">&quot;img/blocks.gif&quot;</span> <span class="attr">width</span>=<span class="string">&quot;35px&quot;</span> <span class="attr">style</span>=<span class="string">&quot;margin-top: 5px;&quot;</span>/&gt;</span></span><br><span class="line">				<span class="tag">&lt;<span class="name">font</span> <span class="attr">color</span>=<span class="string">&quot;white&quot;</span> <span class="attr">size</span>=<span class="string">&quot;4px&quot;</span>&gt;</span>506班级管理系统<span class="tag">&lt;/<span class="name">font</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">span</span> <span class="attr">id</span>=<span class="string">&quot;n_title&quot;</span> <span class="attr">style</span>=<span class="string">&quot;float: right;&quot;</span>&gt;</span></span><br><span class="line">				欢迎 admin登录<span class="symbol">&amp;nbsp;</span><span class="symbol">&amp;nbsp;</span><span class="symbol">&amp;nbsp;</span></span><br><span class="line">				<span class="tag">&lt;<span class="name">a</span> <span class="attr">id</span>=<span class="string">&quot;n_title_pwd&quot;</span> <span class="attr">href</span>=<span class="string">&quot;javascript:void(0)&quot;</span>&gt;</span>修改密码<span class="tag">&lt;/<span class="name">a</span>&gt;</span>|</span><br><span class="line">				<span class="tag">&lt;<span class="name">a</span> <span class="attr">id</span>=<span class="string">&quot;n_title_out&quot;</span> <span class="attr">href</span>=<span class="string">&quot;javascript:void(0)&quot;</span>&gt;</span>退出<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">		<span class="comment">&lt;!--布局：南--&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;sdiv&quot;</span> <span class="attr">data-options</span>=<span class="string">&quot;region:&#x27;south&#x27;,border:false&quot;</span> <span class="attr">style</span>=<span class="string">&quot;height:35%;&quot;</span>&gt;</span></span><br><span class="line">			<span class="symbol">&amp;copy;</span>2008-2018 506班级网站,仿冒必纠</span><br><span class="line">		<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">		<span class="comment">&lt;!--布局：西--&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">div</span> <span class="attr">data-options</span>=<span class="string">&quot;region:&#x27;west&#x27;,title:&#x27;系统菜单&#x27;,split:true&quot;</span> <span class="attr">style</span>=<span class="string">&quot;width: 200px;&quot;</span>&gt;</span></span><br><span class="line">			<span class="comment">&lt;!--分类效果实现--&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;easyui-accordion&quot;</span> <span class="attr">data-options</span>=<span class="string">&quot;fit:true,border:false&quot;</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;&quot;</span> <span class="attr">title</span>=<span class="string">&quot;常用网站&quot;</span> &gt;</span></span><br><span class="line">					<span class="comment">&lt;!--创建菜单--&gt;</span></span><br><span class="line">					<span class="tag">&lt;<span class="name">ul</span> <span class="attr">id</span>=<span class="string">&quot;treeMenu&quot;</span> <span class="attr">class</span>=<span class="string">&quot;easyui-tree&quot;</span>&gt;</span></span><br><span class="line">						<span class="tag">&lt;<span class="name">li</span>&gt;</span></span><br><span class="line">							<span class="tag">&lt;<span class="name">span</span>&gt;</span>购物网站<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">							<span class="comment">&lt;!--二级--&gt;</span></span><br><span class="line">							<span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">								<span class="tag">&lt;<span class="name">li</span> <span class="attr">data-options</span>=<span class="string">&quot;attributes:&#123;url:&#x27;http://www.taobao.com&#x27;&#125;&quot;</span>&gt;</span>淘宝网<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">								<span class="tag">&lt;<span class="name">li</span> <span class="attr">data-options</span>=<span class="string">&quot;attributes:&#123;url:&#x27;http://www.jd.com&#x27;&#125;&quot;</span>&gt;</span>京东网<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">								<span class="tag">&lt;<span class="name">li</span> <span class="attr">data-options</span>=<span class="string">&quot;attributes:&#123;url:&#x27;http://www.suning.com&#x27;&#125;&quot;</span>&gt;</span>苏宁易购<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">							<span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">						<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">						<span class="tag">&lt;<span class="name">li</span>&gt;</span></span><br><span class="line">							<span class="tag">&lt;<span class="name">span</span>&gt;</span>学习网站<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">							<span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">								<span class="tag">&lt;<span class="name">li</span> <span class="attr">data-options</span>=<span class="string">&quot;attributes:&#123;url:&#x27;http://www.bjsxt.com&#x27;&#125;&quot;</span>&gt;</span>北京尚学堂<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">								<span class="tag">&lt;<span class="name">li</span> <span class="attr">data-options</span>=<span class="string">&quot;attributes:&#123;url:&#x27;http://www.baidu.com&#x27;&#125;&quot;</span>&gt;</span>百度一下<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">								<span class="tag">&lt;<span class="name">li</span> <span class="attr">data-options</span>=<span class="string">&quot;attributes:&#123;url:&#x27;http://www.so.com&#x27;&#125;&quot;</span>&gt;</span>360搜索<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">							<span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">						<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">						<span class="tag">&lt;<span class="name">li</span>&gt;</span></span><br><span class="line">							<span class="tag">&lt;<span class="name">span</span>&gt;</span>娱乐网站<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">							<span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">								<span class="tag">&lt;<span class="name">li</span>&gt;</span>斗鱼<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">								<span class="tag">&lt;<span class="name">li</span>&gt;</span>虎牙<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">								<span class="tag">&lt;<span class="name">li</span>&gt;</span>熊猫<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">							<span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">						<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">					<span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;&quot;</span> <span class="attr">title</span>=<span class="string">&quot;个人收藏&quot;</span>&gt;</span></span><br><span class="line">					菜单二</span><br><span class="line">				<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;&quot;</span> <span class="attr">title</span>=<span class="string">&quot;系统信息&quot;</span>&gt;</span></span><br><span class="line">					菜单三</span><br><span class="line">				<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">				</span><br><span class="line">			<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">			</span><br><span class="line">		<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">		<span class="comment">&lt;!--布局：中间--&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">div</span> <span class="attr">data-options</span>=<span class="string">&quot;region:&#x27;center&#x27;&quot;</span>&gt;</span></span><br><span class="line">			<span class="comment">&lt;!--选项卡使用--&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;div_tabs&quot;</span> <span class="attr">class</span>=<span class="string">&quot;easyui-tabs&quot;</span> <span class="attr">data-options</span>=<span class="string">&quot;fit:true,border:false&quot;</span>&gt;</span></span><br><span class="line">				<span class="comment">&lt;!--首页--&gt;</span></span><br><span class="line">				<span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;&quot;</span> <span class="attr">title</span>=<span class="string">&quot;首页&quot;</span> <span class="attr">style</span>=<span class="string">&quot;background-image:url(img/body.jpg) ;background-size: cover;&quot;</span>&gt;</span></span><br><span class="line">					</span><br><span class="line">				<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">		<span class="comment">&lt;!--创建修改密码窗口--&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;div_pwd&quot;</span> <span class="attr">class</span>=<span class="string">&quot;easyui-window&quot;</span> <span class="attr">title</span>=<span class="string">&quot;修改密码&quot;</span> <span class="attr">style</span>=<span class="string">&quot;width: 400px;height: 250px;&quot;</span> <span class="attr">data-options</span>=<span class="string">&quot;collapsible:false,minimizable:false,maximizable:false,closed:true,modal:true&quot;</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">table</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;<span class="name">tr</span>&gt;</span></span><br><span class="line">					<span class="tag">&lt;<span class="name">td</span>&gt;</span>原有密码:<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">					<span class="tag">&lt;<span class="name">td</span>&gt;</span></span><br><span class="line">						<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;password&quot;</span> /&gt;</span></span><br><span class="line">					<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;<span class="name">tr</span>&gt;</span></span><br><span class="line">					<span class="tag">&lt;<span class="name">td</span>&gt;</span>新密码:<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">					<span class="tag">&lt;<span class="name">td</span>&gt;</span></span><br><span class="line">						<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;password&quot;</span> /&gt;</span></span><br><span class="line">					<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;<span class="name">tr</span>&gt;</span></span><br><span class="line">					<span class="tag">&lt;<span class="name">td</span>&gt;</span>确认密码:<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">					<span class="tag">&lt;<span class="name">td</span>&gt;</span></span><br><span class="line">						<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;password&quot;</span> /&gt;</span></span><br><span class="line">					<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;<span class="name">tr</span>&gt;</span></span><br><span class="line">					<span class="tag">&lt;<span class="name">td</span> <span class="attr">colspan</span>=<span class="string">&quot;2&quot;</span>&gt;</span></span><br><span class="line">						<span class="tag">&lt;<span class="name">a</span>  <span class="attr">href</span>=<span class="string">&quot;javascript:void(0)&quot;</span> <span class="attr">class</span>=<span class="string">&quot;easyui-linkbutton&quot;</span> <span class="attr">data-options</span>=<span class="string">&quot;iconCls:&#x27;icon-save&#x27;&quot;</span>&gt;</span>确认修改<span class="tag">&lt;/<span class="name">a</span>&gt;</span> <span class="symbol">&amp;nbsp;</span><span class="symbol">&amp;nbsp;</span><span class="symbol">&amp;nbsp;</span><span class="symbol">&amp;nbsp;</span></span><br><span class="line">						<span class="tag">&lt;<span class="name">a</span> <span class="attr">id</span>=<span class="string">&quot;btnCan&quot;</span> <span class="attr">href</span>=<span class="string">&quot;javascript:void(0)&quot;</span> <span class="attr">class</span>=<span class="string">&quot;easyui-linkbutton&quot;</span> <span class="attr">data-options</span>=<span class="string">&quot;iconCls:&#x27;icon-cancel&#x27;&quot;</span>&gt;</span>取消<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">					<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;/<span class="name">table</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">	<span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<img src= "https://gitee.com/kylincw/images/raw/master/loading.gif" data-lazy-src="https://qiniu.codekylin.cn/github/images/20200405122211.gif" alt=""></li>
</ul>
</li>
</ul>
</li>
</ul>
</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="mailto:undefined">Kylin</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://www.codekylin.cn/47587.html">https://www.codekylin.cn/47587.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://www.codekylin.cn" target="_blank">Kylin</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/%E5%9F%BA%E7%A1%80/">基础</a><a class="post-meta__tags" href="/tags/EasyUI/">EasyUI</a></div><div class="post_share"><div class="social-share" data-image="https://qiniu.codekylin.cn/github/img/img/博客封面19.png" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/social-share.js/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/social-share.js/dist/js/social-share.min.js" defer></script></div></div><div class="post-reward"><div class="reward-button button--animated"><i class="fas fa-qrcode"></i> 打赏</div><div class="reward-main"><ul class="reward-all"><li class="reward-item"><a href="https://qiniu.codekylin.cn/img/20200807181442.jpg" target="_blank"><img class="post-qr-code-img" data-lazy-src="https://qiniu.codekylin.cn/img/20200807181442.jpg" alt="微信"/></a><div class="post-qr-code-desc">微信</div></li><li class="reward-item"><a href="https://qiniu.codekylin.cn/img/20200807181505.jpg" target="_blank"><img class="post-qr-code-img" data-lazy-src="https://qiniu.codekylin.cn/img/20200807181505.jpg" alt="支付寶"/></a><div class="post-qr-code-desc">支付寶</div></li></ul></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/30445.html"><img class="prev-cover" data-lazy-src="https://qiniu.codekylin.cn/github/img/img/wallhaven-md6mk8.png" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">HTTP协议详解</div></div></a></div><div class="next-post pull-right"><a href="/14007.html"><img class="next-cover" data-lazy-src="https://qiniu.codekylin.cn/github/images/20200718200005.jpg" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">JQuery基础-6</div></div></a></div></nav><div class="relatedPosts"><div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span> 相关推荐</span></div><div class="relatedPosts-list"><div><a href="/62902.html" title="JQuery基础-2"><img class="cover" data-lazy-src="https://qiniu.codekylin.cn/github/img/img/wallhaven-6qvvrx.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2019-10-22</div><div class="title">JQuery基础-2</div></div></a></div><div><a href="/62710.html" title="JQuery基础-1"><img class="cover" data-lazy-src="https://qiniu.codekylin.cn/github/img/img/wallhaven-oxm7vp.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2019-10-20</div><div class="title">JQuery基础-1</div></div></a></div><div><a href="/13687.html" title="JQuery基础-3"><img class="cover" data-lazy-src="https://qiniu.codekylin.cn/github/img/img/荒鲸.png" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2019-10-22</div><div class="title">JQuery基础-3</div></div></a></div><div><a href="/63286.html" title="JQuery基础-4"><img class="cover" data-lazy-src="https://qiniu.codekylin.cn/github/img/img/博客封面12.png" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2019-10-22</div><div class="title">JQuery基础-4</div></div></a></div><div><a href="/14327.html" title="JQuery基础-5"><img class="cover" data-lazy-src="https://qiniu.codekylin.cn/github/img/img/博客封面19.png" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2019-10-22</div><div class="title">JQuery基础-5</div></div></a></div><div><a href="/14007.html" title="JQuery基础-6"><img class="cover" data-lazy-src="https://qiniu.codekylin.cn/github/images/20200718200005.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2019-10-22</div><div class="title">JQuery基础-6</div></div></a></div></div></div><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div class="vcomment" id="vcomment"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="card-info-avatar is-center"><img class="avatar-img" data-lazy-src="https://qiniu.codekylin.cn/img/20200807181526.jpg" onerror="this.onerror=null;this.src='https://qiniu.codekylin.cn/github/img/friend_404.gif'" alt="avatar"/><div class="author-info__name">Kylin</div><div class="author-info__description">学习不易，努力努力~</div></div><div class="card-info-data"><div class="card-info-data-item is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">362</div></a></div><div class="card-info-data-item is-center"><a href="/tags/"><div class="headline">标签</div><div class="length-num">427</div></a></div><div class="card-info-data-item is-center"><a href="/categories/"><div class="headline">分类</div><div class="length-num">101</div></a></div></div><a class="button--animated" id="card-info-btn"><i class="fas fa-bookmark"></i><span>加入书签</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/kylincw" target="_blank" title="Github"><i class="iconfont icon-github"></i></a><a class="social-icon" href="tencent://message/?Menu=yes&amp;uin=171346168&amp;Service=300&amp;sigT=45a1e5847943b64c6ff3990f8a9e644d2b31356cb0b4ac6b24663a3c8dd0f8aa12a595b1714f9d45" target="_blank" title="qq"><i class="iconfont icon-qq"></i></a><a class="social-icon" href="https://space.bilibili.com/53836035" target="_blank" title="BiliBili"><i class="iconfont icon-bilibili-line"></i></a><a class="social-icon" href="mailto:zhang171346168@qq.com" target="_blank" title="Email"><i class="iconfont icon-email1"></i></a><a class="social-icon" href="/atom.xml" target="_blank" title="RSS"><i class="iconfont icon-rss"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn card-announcement-animation"></i><span>公告</span></div><div class="announcement_content">学习不易，努力努力！</div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#EasyUI%E4%BD%BF%E7%94%A8"><span class="toc-number">1.</span> <span class="toc-text">EasyUI使用</span></a></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/56352.html" title="be动词"><img data-lazy-src="https://qiniu.codekylin.cn/github/img/img/博客封面10.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="be动词"/></a><div class="content"><a class="title" href="/56352.html" title="be动词">be动词</a><time datetime="2022-07-12T11:47:29.800Z" title="更新于 2022-07-12 19:47:29">2022-07-12</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/36436.html" title="JVM堆内存"><img data-lazy-src="https://qiniu.codekylin.cn/img/20200418115059.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="JVM堆内存"/></a><div class="content"><a class="title" href="/36436.html" title="JVM堆内存">JVM堆内存</a><time datetime="2022-07-12T11:47:29.800Z" title="更新于 2022-07-12 19:47:29">2022-07-12</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/44292.html" title="Java多线程详解"><img data-lazy-src="https://qiniu.codekylin.cn/github/img/img/wallhaven-eorjzk.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Java多线程详解"/></a><div class="content"><a class="title" href="/44292.html" title="Java多线程详解">Java多线程详解</a><time datetime="2022-07-12T11:47:29.800Z" title="更新于 2022-07-12 19:47:29">2022-07-12</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/40200.html" title="谷粒商城记录"><img data-lazy-src="https://qiniu.codekylin.cn/github/img/img/wallhaven-6qvvrx.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="谷粒商城记录"/></a><div class="content"><a class="title" href="/40200.html" title="谷粒商城记录">谷粒商城记录</a><time datetime="2022-07-12T11:47:29.800Z" title="更新于 2022-07-12 19:47:29">2022-07-12</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/27082.html" title="Spring学习-3"><img data-lazy-src="https://qiniu.codekylin.cn/github/img/img/wallhaven-4x28xo.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Spring学习-3"/></a><div class="content"><a class="title" href="/27082.html" title="Spring学习-3">Spring学习-3</a><time datetime="2022-07-12T11:47:29.799Z" title="更新于 2022-07-12 19:47:29">2022-07-12</time></div></div></div></div></div></div></main><footer id="footer" style="background-image: url('https://qiniu.codekylin.cn/github/img/img/博客封面19.png')"><div id="footer-wrap"><div class="copyright">&copy;2019 - 2022 By Kylin</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div><div class="footer_custom_text"><a target="_blank" rel="noopener" href="https://beian.miit.gov.cn/"><img class="icp-icon" src="https://img.alicdn.com/tfs/TB1..50QpXXXXX7XpXXXXXXXXXX-40-40.png"><span>湘ICP备2022005420号-1</span></a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="font-plus" type="button" title="放大字体"><i class="fas fa-plus"></i></button><button id="font-minus" type="button" title="缩小字体"><i class="fas fa-minus"></i></button><button id="translateLink" type="button" title="简繁转换">繁</button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i></button></div></div><div id="local-search"><div class="search-dialog"><div class="search-dialog__title" id="local-search-title">本地搜索</div><div id="local-input-panel"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div></div><hr/><div id="local-search-results"></div><span class="search-close-button"><i class="fas fa-times"></i></span></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="/js/tw_cn.js"></script><script src="https://cdn.jsdelivr.net/npm/instant.page/instantpage.min.js" type="module"></script><script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload/dist/lazyload.iife.min.js"></script><script src="https://cdn.jsdelivr.net/npm/node-snackbar/dist/snackbar.min.js"></script><script src="/js/search/local-search.js"></script><div class="js-pjax"><script>function loadValine () {
  function initValine () {
    const valine = new Valine(Object.assign({
      el: '#vcomment',
      appId: 'ClIyIUhj1ue2rcRTsApYCR50-gzGzoHsz',
      appKey: 'ATug9IScYQBHILhKWEqBHYxM',
      placeholder: '昵称填入QQ号能获取到QQ头像哦~请输入正确的邮箱地址，你将会快速收到我的回复并且通过邮件通知你！~',
      avatar: 'robohash',
      meta: 'nick,mail,link'.split(','),
      pageSize: '10',
      lang: 'zh-cn',
      recordIP: false,
      serverURLs: 'https://cliyiuhj.lc-cn-n1-shared.com',
      emojiCDN: '',
      emojiMaps: "",
      enableQQ: true,
      path: window.location.pathname,
      requiredFields: ["nick,mail"],
      visitor: false
    }, null))
  }

  if (typeof Valine === 'function') initValine() 
  else getScript('https://cdn.jsdelivr.net/npm/valine/dist/Valine.min.js').then(initValine)
}

if ('Valine' === 'Valine' || !true) {
  if (true) btf.loadComment(document.getElementById('vcomment'),loadValine)
  else setTimeout(loadValine, 0)
} else {
  function loadOtherComment () {
    loadValine()
  }
}</script></div><script defer="defer" id="ribbon" src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/canvas-ribbon.min.js" size="150" alpha="0.6" zIndex="-1" mobile="false" data-click="true"></script><script defer="defer" id="fluttering_ribbon" mobile="false" src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/canvas-fluttering-ribbon.min.js"></script></div></body></html>